<template>
    <div class="vcommand">
        <h2>指令</h2>
        <div class="hr"></div>
        <p class="decr">
            当前版本的vue有14个指令。<br>
        </p>
        <div class="hr"></div>
        <el-tag effect="dark">v-text</el-tag>
        <p class="decr">
            <span v-text="text1">
                {{text1}}
            </span>
        </p>
        <div class="hr"></div>
        <el-tag effect="dark">v-html</el-tag>
        <p class="decr">
            <span v-text="html1">
                {{html1}}
            </span>
        </p>
        <div class="hr"></div>
        <el-tag effect="dark">v-show</el-tag>
        <div class="show-cont">
            <div class="show-inner" v-show="isShow"></div>
        </div>
        <p class="decr">
            <el-button @click="switchShow">切换显示/隐藏</el-button>
        </p>
        <div class="hr"></div>
        <el-tag effect="dark">v-if / v-else-if / v-else</el-tag>
        <p class="decr">
            这里和js中的if / else if / else不同的是，<br>
            如果满足了if的条件，不管满不满足else if的条件，都不会去执行else if的判断
        </p>
        <div class="show-cont">
            <div class="show-inner" v-if="countif > 2 && countif < 5">1</div>
            <div class="show-inner" v-else-if="countif > 5 && countif < 8">2</div>
            <div class="show-inner" v-else-if="countif && countif < 12 > 8">3</div>
            <div class="show-inner" v-else>4</div>
        </div>
        <p class="decr">
            <el-button @click="countif++">当前值：{{countif}}</el-button>
        </p>
        <div class="hr"></div>
        <el-tag effect="dark">v-for</el-tag>
        <p class="decr">
            用v-for指令时，要养成带上key的好习惯！
        </p>
        <p class="decr" v-for="d in backdata" :key="d.id">
            我是{{d.name}}，我今年{{d.age}}岁了。
        </p>
        <div class="hr"></div>
        <el-tag effect="dark">v-on</el-tag>
        <p class="decr">
            用于绑定事件：<br>
            v-on:事件名="事件处理函数"<br>
            简写为：<br>
            @事件名="事件处理函数"<br>
            修饰符：<br>
            .stop - 调用 event.stopPropagation()。<br>
            .prevent - 调用 event.preventDefault()。<br>
            .capture - 添加事件侦听器时使用 capture 模式。<br>
            .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。<br>
            .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。<br>
            .native - 监听组件根元素的原生事件。<br>
            .once - 只触发一次回调。<br>
            .left - (2.2.0) 只当点击鼠标左键时触发。<br>
            .right - (2.2.0) 只当点击鼠标右键时触发。<br>
            .middle - (2.2.0) 只当点击鼠标中键时触发。<br>
            .passive - (2.3.0) 以 { passive: true } 模式添加侦听器<br>
        </p>
        <div class="hr"></div>
        <el-tag effect="dark">v-bind</el-tag>
        <p class="decr">
            动态绑定数据。<br>
            v-bind:数据名="绑定内容"<br>
            简写为：<br>
            :数据名="绑定内容"<br>
            绑定class类：<br>
            {{classBind1}}<br>
            {{classBind2}}<br>
            {{classBind3}}<br>
        </p>
        <div class="hr"></div>
        <el-tag effect="dark">v-model</el-tag>
        <p class="decr">
            修饰符：<br>
            .lazy - 取代 input 监听 change 事件<br>
            .number - 输入字符串转为有效的数字<br>
            .trim - 输入首尾空格过滤<br>
        </p>
        <div class="model input">
            <el-tag>input</el-tag><br>
            <h3>当前输入：{{input}}</h3>
            <el-input placeholder="请输入手机号" v-model.number="input"></el-input>
        </div>
        <div class="model textarea">
            <el-tag>textarea</el-tag><br>
            <h3>当前输入：{{area}}</h3>
            <el-input type="textarea" placeholder="请输入" v-model="area"></el-input>
        </div>
        <div class="model radio">
            <el-tag>radio</el-tag><br>
            <h3>当前选择：{{radio}}</h3>
            <el-radio v-model="radio" label="A">A</el-radio>
            <el-radio v-model="radio" label="B">B</el-radio>
            <el-radio v-model="radio" label="C">C</el-radio>
        </div>
        <div class="model checkbox">
            <el-tag>单个checkbox</el-tag><br>
            <h3>当前是否选择：{{checked}}</h3>
            <el-checkbox v-model="checked">选择项</el-checkbox>
        </div>
        <div class="model checkbox">
            <el-tag>多个checkbox</el-tag><br>
            <h3>选择你的爱好：{{checkList}}</h3>
            <el-checkbox-group v-model="checkList">
                <el-checkbox label="品尝美食"></el-checkbox>
                <el-checkbox label="睡懒觉"></el-checkbox>
                <el-checkbox label="旅游"></el-checkbox>
                <el-checkbox label="敲代码" disabled></el-checkbox>
            </el-checkbox-group>
        </div>
        <div class="model select">
            <el-tag>select</el-tag><br>
            <h3>选择一种食物：{{value}}</h3>
            <el-select v-model="value" placeholder="请选择">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
        </div>
        <div class="hr"></div>
        <el-tag effect="dark">v-slot</el-tag>
        <p class="decr">
            插槽，就是当某些元素或组件被编译后，让slot给vue一个指示，让vue把编译好的元素或组件放到指定位置。<br>
            还可以用于子组件向父组件中传递数据。<br>
            只能被用于两个地方：<br>
            1. {{temp}}<br>
            2. 组件<br>
        </p>
        <p class="decr">
            分类：<br>
            1. 默认插槽<br>
            2. 具名插槽<br>
            3. 作用域插槽<br>
            以下通过父子两个组件的使用来举例。<br>
        </p>
        <p class="decr">
            <el-tag>默认插槽</el-tag><br>
            不带名字的插槽。<br>
            在父组件里使用子组件时，把子组件标签包含的内容，传递到子组件里进行渲染。<br>
            步骤：<br>
            1. 在父组件Vcommand里使用子组件VcommandSon，并在VcommandSon标签里添加需要传递给子组件的内容。<br>
            2. 在子组件VcommandSon中，使用slot标签，来告诉vue把内容放在slot标签的位置。<br>
            <VcommandSon>
                <img src="../assets/image/dilireba.jpg" alt="" width="100px">
            </VcommandSon>
        </p>
        <p class="decr">
            <el-tag>具名插槽</el-tag><br>
            就是带名字的插槽。<br>
            起名字的写法：<br>
            在父组件里起名字：v-slot:插槽名（可简写为#插槽名）<br>
            在子组件里接收名字：name="插槽名"<br>
            步骤：<br>
            1. 在父组件Vcommand里使用子组件VcommandSon，并在VcommandSon标签里添加需要传递给子组件的内容。<br>
                然后在template标签里起一个slot插槽名字。<br>
            2. 在子组件VcommandSon中，使用slot标签，来告诉vue把内容放在slot标签的位置。<br>
                然后在slot标签里用name接收对应的插槽名字。<br>
            <VcommandSon>
                <!-- 这个插槽的名字叫img1 -->
                <template v-slot:img1>
                    <img src="../assets/image/dilireba1.jpg" alt="" width="100px">
                </template>
                <template #img2>
                    <img src="../assets/image/dilireba2.jpg" alt="" width="100px">
                </template>
            </VcommandSon>
        </p>
        <p class="decr">
            <el-tag>作用域插槽</el-tag><br>
            就是附带数据的插槽。<br>
            这个附带的数据，是存放在子组件VcommandSon2里的，现在父组件中的VcommandSon2标签里需要用到这个数据，<br>
            此时，就可以通过插槽，把数据通过参数，传给在父组件中的VcommandSon2标签。<br>
            供对应的插槽使用。<br>
            <br>
        </p>
        <p class="decr">
            <span style="color: #eaa6b2;">第一种：默认插槽情况下的作用域插槽</span><br>
            <br>
            <VcommandSon2>
                <template v-slot="data">
                    {{data}}<br>
                    <span>此时，就通过data获取到了从子组件传过来的hobby</span><br>
                    <span>data是一个对象，结构是{hobby: ['吃饭', '睡觉', '唱歌', '看电影']}</span><br>
                    <span>所以，我们在这里还可以使用解构语法，直接拿到hobby数据</span><br>
                </template>
            </VcommandSon2><br>
            <span>通过解构语法，获取到hobby数据：</span><br>
            <VcommandSon2>
                <template v-slot="{hobby}">
                    {{hobby}}<br>
                </template>
            </VcommandSon2>
        </p>
        <p class="decr">
            <span style="color: #eaa6b2;">第二种：具名插槽情况下的作用域插槽</span><br><br>
            <span>通过解构语法，获取到userMsg数据：</span><br>
            <VcommandSon2>
                <template v-slot:hob="{userMsg}">
                    {{userMsg}}<br>
                </template>
            </VcommandSon2>
        </p>
        <div class="hr"></div>
        <el-tag effect="dark">v-pre</el-tag>
        <p class="decr">
            跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。<br>
            跳过大量没有指令的节点会加快编译。
        </p>
        <div class="model">
            <p v-pre>
                {{这里显示原始的双大括号及其内容，不会被编译}}<br>
                <span>{{子元素也不会被编译}}</span>
            </p>
        </div>
        <div class="hr"></div>
        <el-tag effect="dark">v-cloak</el-tag>
        <p class="decr">
            配合css规则及display: none，可以让双大括号内容被编译前不显示。
        </p>
        <div class="model">
            <p v-cloak>
                {{msg1}}
            </p>
        </div>
        <div class="hr"></div>
        <el-tag effect="dark">v-once</el-tag>
        <p class="decr">
            只渲染元素和组件一次。（初始化时）<br>
            随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。<br>
            这可以用于优化更新性能。<br>
        </p>
        <div class="model">
            <!-- 做个对比，一个加v-once，另一个不加v-once -->
            <span>加了v-once:</span>
            <p v-once>当前的数值是：{{num1}}</p>
            <span>不加v-once:</span>
            <p>当前的数值是：{{num1}}</p>
            <el-button style="marginTop: 10px;" @click="num1++">点击num1+1</el-button>
        </div>
        <div class="hr"></div>
        <el-tag
            effect="dark"
            type="success"
            >
            <a :href="getHref" target="_blank">查看示例代码</a>
        </el-tag>
    </div>
</template>

<script>
import mixinPage from './mixin-page';
import VcommandSon from './VcommandSon';
import VcommandSon2 from './VcommandSon2';

export default {
    name: 'Vcommand',
    components: {VcommandSon, VcommandSon2}, // 引入子组件
    mixins: [mixinPage],
    data() {
        return {
            text1: 'text加入内容',
            html1: 'html加入内容',
            isShow: true,
            countif: 0,
            backdata: [
                {id: '001', name: '张三', age: 18},
                {id: '002', name: '迪丽热巴', age: 19},
                {id: '003', name: '小明', age: 20},
            ],
            classBind1: `<div :class="{ red: isRed }"></div>`,
            classBind2: `<div :class="[classA, classB]"></div>`,
            classBind3: `<div :class="[classA, { classB: isB, classC: isC }]"></div>`,
            input: null,
            area: '',
            radio: '',
            checked: false,
            checkList: [],
            options: [{
                value: '黄金糕',
                label: '黄金糕'
                }, {
                value: '双皮奶',
                label: '双皮奶'
                }, {
                value: '蚵仔煎',
                label: '蚵仔煎'
                }, {
                value: '龙须面',
                label: '龙须面'
                }, {
                value: '北京烤鸭',
                label: '北京烤鸭'
            }],
            value: '',
            msg1: '测试v-cloak',
            num1: 0,
            temp: `<template>`,
        }
    },
    methods: {
        switchShow() {
            this.isShow = !this.isShow;
        }
    }
}
</script>

<style lang="less" scoped>
@import '../assets/css/mixin-frame.less';

.show-cont {
    width: 50px;
    height: 50px;
    border-radius: 6px;
    margin-top: 10px;
    overflow: hidden;

    .show-inner {
        width: 100%;
        height: 100%;
        background-color: #409eff;
        font-size: 30px;
        color: #fff;
        text-align: center;
        line-height: 50px;
    }
}

.model {
    width: 100%;
    background-color: rgb(248, 248, 248);
    margin-top: 10px;
    box-sizing: border-box;
    padding: 0 0 10px 10px;
    color: #a9a4a4;

    .el-textarea {
        width: 300px;
        margin-top: 10px;
    }
}

[v-cloak] {
    display: none;
}
</style>